export default {
  name: 'e-minder-navbar',
  data() {
    return {
      // 缩放比例
      zoom: [10, 20, 30, 50, 80, 100, 120, 150, 200],
      // 中心点
      origin: 100,
      // 当前缩放
      indicator: 100,
      // 放大到最大
      zoomRadioIn: false,
      // 缩小到最小
      zoomRadioOut: false,
      // 启用拖拽
      enableHand: false,
      // 显示缩略图
      showPreviewer: false,
      // 缩放位置
      zoomPan: {
        origin: 100,
        indicator: 0
      },
      // 缩略图
      previewer: {
        dragging: false,
        paper: null,
        visibleRect: null,
        visibleView: null,
        contentView: null,
        nodeThumb: null,
        connectionThumb: null
      }
    }
  },
  props: {
    minder: {
      type: Object
    }
  },
  watch: {
    // minder 渲染完成后触发navbar初始化 只会触发一次
    minder: function() {
      this.init()
    },
    // 监听导航器显示隐藏
    showPreviewer: function() {
      this.toggleBindPreviewer()
    }
  },
  render(h) {
    const children = []
    children.push(h('div', {
      title: '放大',
      class: 'nav-btn zoom-in',
      on: {
        click: () => {
          this.minder.execCommand('zoomIn')
        }
      }
    }, [
      h('div', {
        class: 'icon'
      })
    ]))

    children.push(h('div', {
      ref: 'zoomPan',
      class: 'zoom-pan'
    }, [
      h('div', {
        class: 'origin',
        style: { 'transform': 'translate(0, ' + this.zoomPan.origin + 'px)' },
        on: {
          click: () => {
            this.minder.execCommand('zoom', this.origin)
          }
        }
      }),
      h('div', {
        class: 'indicator',
        style: { 'transform': 'translate(0, ' + this.zoomPan.indicator + 'px)', transition: 'transform 200ms' }
      })
    ]))

    children.push(h('div', {
      title: '缩小',
      class: {
        'nav-btn': true,
        'zoom-out': true,
        'active': this.zoomRadioOut
      },
      on: {
        click: () => {
          this.minder.execCommand('zoomOut')
        }
      }
    }, [
      h('div', {
        class: 'icon'
      })
    ]))

    children.push(h('div', {
      title: '允许拖拽',
      class: {
        'nav-btn': true,
        'hand': true,
        'active': this.enableHand
      },
      on: {
        click: () => {
          this.enableHand = !this.enableHand
          this.minder.execCommand('hand')
        }
      }
    }, [
      h('div', {
        class: 'icon'
      })
    ]))

    children.push(h('div', {
      title: '定位根节点',
      class: {
        'nav-btn': true,
        'camera': true
      },
      on: {
        click: () => {
          this.minder.execCommand('camera', this.minder.getRoot())
        }
      }
    }, [
      h('div', {
        class: 'icon'
      })
    ]))

    children.push(h('div', {
      title: '导航器',
      class: {
        'nav-btn': true,
        'nav-trigger': true,
        'active': this.showPreviewer
      },
      on: {
        click: () => {
          this.showPreviewer = !this.showPreviewer
        }
      }
    }, [
      h('div', {
        class: 'icon'
      })
    ]))

    children.push(h('div', {
      ref: 'navPreviewer',
      class: 'nav-previewer',
      directives: [{ name: 'show', value: this.showPreviewer }]
    }))

    return h('div', {
      class: 'nav-bar'
    }, children)
  },
  mounted() {
    // 初始化滑轨位置
    this.zoomPan.origin = this.calePanHeight(this.origin)
    this.zoomPan.indicator = this.calePanHeight(this.indicator)
  },
  methods: {
    init() {
      // 配置脑图缩放比例
      this.minder.setDefaultOptions({ zoom: this.zoom })
      // 渲染缩略图
      this.renderPaper()
      // 注册事件
      this.registerEvent()
    },
    /**
     * 计算圆点在滑轨的位置
     * @param current 当前缩放参数
     * @returns {number} 高度
     */
    calePanHeight(current) {
      const max = this.zoom[this.zoom.length - 1]
      const min = this.zoom[0]
      const range = max - min
      const rate = 1 - (current - min) / range
      return Math.round(this.$refs.zoomPan.offsetHeight * rate)
    },
    // 注册事件
    registerEvent() {
      // 脑图Zoom事件触发
      this.minder.on('zoom', this.onZoom)
    },
    onZoom(e) {
      this.zoomPan.indicator = this.calePanHeight(e.zoom)
      this.zoomRadioIn = e.zoom === this.zoom[this.zoom.length - 1]
      this.zoomRadioOut = e.zoom === this.zoom[0]
    },
    // 渲染缩略图
    renderPaper() {
      // 画布，渲染缩略图
      // eslint-disable-next-line no-undef
      this.previewer.paper = new kity.Paper(this.$refs.navPreviewer)

      // 用两个路径来挥之节点和连线的缩略图
      // eslint-disable-next-line no-undef
      this.previewer.nodeThumb = this.previewer.paper.put(new kity.Path())
      // eslint-disable-next-line no-undef
      this.previewer.connectionThumb = this.previewer.paper.put(new kity.Path())

      // 表示可视区域的矩形
      // eslint-disable-next-line no-undef
      this.previewer.visibleRect = this.previewer.paper.put(new kity.Rect(100, 100).stroke('#48b3ff', '1%'))

      // 画布 - 鼠标按下事件
      this.previewer.paper.on('mousedown', (e) => {
        this.previewer.dragging = true
        this.moveView(e.getPosition('top'), 200)
        // $previewNavigator.addClass("grab");
      })

      // 画布 - 鼠标移动事件
      this.previewer.paper.on('mousemove', (e) => {
        if (this.previewer.dragging) {
          this.moveView(e.getPosition('top'))
        }
      })

      this.previewer.paper.on('mouseup', (e) => {
        this.previewer.dragging = false
      })

      this.toggleBindPreviewer()
    },
    // toggle缩略图绑定事件
    toggleBindPreviewer() {
      if (this.showPreviewer) {
        this.minder.on('layout layoutallfinish', this.updateContentView)
        this.minder.on('viewchange', this.updateVisibleView)
        this.updateContentView()
        this.updateVisibleView()
      } else {
        this.minder.off('layout layoutallfinish', this.updateContentView)
        this.minder.off('viewchange', this.updateVisibleView)
      }
    },
    // 拖动可视区域
    moveView(center, duration) {
      let box = this.previewer.visibleView
      center.x = -center.x
      center.y = -center.y
      const viewMatrix = this.minder.getPaper().getViewPortMatrix()
      box = viewMatrix.transformBox(box)
      const targetPosition = center.offset(box.width / 2, box.height / 2)
      this.minder.getViewDragger().moveTo(targetPosition, duration)
    },
    // 更新缩略图
    updateContentView() {
      this.previewer.contentView = this.minder.getRenderContainer().getBoundaryBox()
      const padding = 30
      this.previewer.paper.setViewBox(this.previewer.contentView.x - padding - 0.5, this.previewer.contentView.y - padding - 0.5,
        this.previewer.contentView.width + padding * 2 + 1, this.previewer.contentView.height + padding * 2 + 1)
      const nodePathData = []; const connectionThumbData = []
      this.minder.getRoot().traverse(function(node) {
        const box = node.getLayoutBox()

        function pathHandler(nodePathData, x, y, width, height) {
          nodePathData.push('M', x, y, 'h', width, 'v', height, 'h', -width, 'z')
        }

        pathHandler(nodePathData, box.x, box.y, box.width, box.height)
        if (node.getConnection() && node.parent && node.parent.isExpanded()) {
          connectionThumbData.push(node.getConnection().getPathData())
        }
      })

      this.previewer.paper.setStyle('background', '#FFFFFF')
      if (nodePathData.length) {
        this.previewer.nodeThumb.fill(this.minder.getStyle('root-background')).setPathData(nodePathData)
      } else {
        this.previewer.nodeThumb.setPathData(null)
      }
      if (connectionThumbData.length) {
        this.previewer.connectionThumb.stroke(this.minder.getStyle('connect-color'), '0.5%').setPathData(connectionThumbData)
      } else {
        this.previewer.connectionThumb.setPathData(null)
      }
    },
    // 更新可视区域
    updateVisibleView() {
      this.previewer.visibleView = this.minder.getViewDragger().getView()
      this.previewer.visibleRect.setBox(this.previewer.visibleView.intersect(this.previewer.contentView))
    }
  }
}
